<template>
  <div class="ele-body">
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form
        :model="query"
        inline size="mini"
        class="ele-form-search"
        @keyup.enter.native="reload"
        @submit.native.prevent
      >
        <el-form-item label="日志类型">
          <el-select v-model="query.type" style="width:100%">
            <el-option :value="item.type" :label="item.title" v-for="(item,index) in typeArr" :key="index"/>
          </el-select>
        </el-form-item>
        <el-form-item label="上传用户">
          <el-select v-model="query.create_user" style="width:100%">
            <el-option :value="item.id" :label="item.username" v-for="(item,index) in userArr" :key="index"/>
          </el-select>
        </el-form-item>
        <el-form-item label="用户角色">
          <el-select v-model="query.role_id" style="width:100%">
            <el-option :value="item.id" :label="item.name" v-for="(item,index) in roleArr" :key="index"/>
          </el-select>
        </el-form-item>
        <el-form-item label="上传时间"  style="width: 420px">
          <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              icon="el-icon-search"
              class="ele-btn-icon"
              @click="reload">查询
          </el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 数据表格 -->
      <el-table
        border
        lazy
        ref="table"
        :data="data"
        v-loading="loading"
        height="calc(100vh - 315px)"
      >
        <el-table-column label="序号" width="55" align="center" type="index">
          <template slot-scope="scope">
            <span
              v-text="$setTableIndex(query.page, query.limit, scope.$index)"
            >
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="日志编号" align="center" prop="id" /> -->
        <el-table-column label="用户名" align="center" prop="username" />
        <el-table-column label="日志类型" align="center" prop="type_name" />
        <el-table-column label="用户角色" align="center" prop="role_name" />
        <el-table-column label="日志节点" align="center" prop="title" />
        <el-table-column label="上传时间" align="center" prop="create_time" >
          <template slot-scope="scope">{{$util.toDateString(scope.row.create_time)}}</template>
        </el-table-column>
        <el-table-column label="备注" align="center" prop="remark" />
      </el-table>
      <pagination
        :total="total"
        :page.sync="query.page"
        :limit.sync="query.limit"
        @pagination="getData"
      />
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "syslogList",
  computed: {
    ...mapGetters(["permission"])
  },
  data() {
    return {
      typeArr: [],//日志类型
      roleArr: [],
      userArr:[],
      loading: false, // 表格加载状态
      total: 0, // 数据总数
      data: [],
      // 表格搜索条件
      query: {
        page: 1,
        limit: 10
      },
      date:[],
      rules: {}
    };
  },
  mounted() {
    this.getTypeList();
    this.getUserList();
    this.getRoleList();
    this.getData();
  },
  methods: {
    /* 获取表格数据 */
    getData() {
      this.loading = true;
      this.query.time_s = this.date && this.date.length > 0 ? this.date[0] : ''
      this.query.time_e=this.date&&this.date.length>0?this.date[1]:''
      this.$http
        .get("/loginlog/index", { params: this.query })
        .then(res => {
          this.total = res.data.count;
          this.loading = false;
          this.data = res.data.data;
        })
        .catch(e => {
          this.loading = false;
          this.$message.error(e.message);
        });
    },
    getTypeList() {
      this.$http
        .get("/Loginlog/getTypes")
        .then(res => {
          this.typeArr = res.data.data;
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
    getUserList() {
      this.$http
        .get("/user/index", {params:{page: 1,limit: 99999} })
        .then(res => {
          this.userArr = res.data.data;
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
    getRoleList() {
      this.$http
        .get("/role/getRoleList")
        .then(res => {
          this.roleArr = res.data.data;
        })
        .catch(e => {
          this.$message.error(e.message);
        });
    },
    /* 查询数据 */
    reload() {
      this.getData();
    },
    /* 重置搜索 */
    reset() {
      this.query = {
        page: 1,
        limit: 10
      };
      this.reload();
    }
  }
};
</script>

<style scoped>
.el-dialog:not(.ele-dialog-form)
  .el-dialog__body
  .el-form
  .el-form-item:last-child {
  margin-bottom: 22px;
}
</style>
